@mixin border-1px($color) {
  position: relative;
  &:after {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    border-top: 1px solid $color;
    content: '';
    width: 100%;
  }
}

.border-1px {
  @include border-1px(rgba(7, 17, 27, 0.1));
}

@mixin bg-image($url) {
  background-image: url($url+'@2x.png');
  @media (-webkit-min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio:3F) {
    background-image: url($url+'@3x.png');
  }
}

// rem优雅降级
@function calculateRem($size: 16) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

// 字体
@mixin font($size, $color) {
  font-size: $size; // font-size: calculateRem($size);
  color: $color;
  font-family: "Microsoft YaHei", "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

// 宽高
@mixin size($w, $h:$w) {
  width: $w;
  height: $h;
}

// 边框
@mixin border($size, $color, $style:solid) {
  border: $size $style $color;
}

@mixin borderLeft($size, $color, $style:solid) {
  border-left: $size $style $color;
}

@mixin borderRight($size, $color, $style:solid) {
  border-right: $size $style $color;
}

@mixin borderTop($size, $color, $style:solid) {
  border-top: $size $style $color;
}

@mixin borderBottom($size, $color, $style:solid) {
  border-bottom: $size $style $color;
}

// flex布局垂直居中
@mixin allCFlex() {
  display: flex;
  justify-content: center;
  align-items: center;
}

// flex两端对齐
@mixin spaceBetween {
  display: flex;
  justify-content: space-between;
}

@mixin spaceBetweenCenter {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@mixin spaceAround {
  display: flex;
  justify-content: space-around;
}

@mixin spaceAroundCenter {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

@mixin leftFlexCenter() {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

@mixin leftFlex() {
  display: flex;
  justify-content: flex-start;
}

@mixin rightFlexCenter() {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

@mixin rightFlex() {
  display: flex;
  justify-content: flex-end;
}

// 定位实现垂直居中
@mixin allCPostion($top:50%, $left:50%) {
  position: absolute;
  left: $left;
  top: $top;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

// 清除浮动
@mixin clearfix() {
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// 类名前缀
@mixin when-inside($context) {
  #{$context} & {
    @content;
  }
}

// 边框阴影
@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
  @if $inset !="" {
    -webkit-box-shadow: $top $left $blur $color $inset;
    -moz-box-shadow: $top $left $blur $color $inset;
    box-shadow: $top $left $blur $color $inset;
  }
  @if $inset=="" {
    -webkit-box-shadow: $top $left $blur $color;
    -moz-box-shadow: $top $left $blur $color;
    box-shadow: $top $left $blur $color;
  }
}

// 透明度
@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8  
}

// 单行文本垂直居中
@mixin lineH($h) {
  height: $h;
  line-height: $h;
}

// 单行文本省略号
@mixin ellipsesOne() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 多行文本省略号
@mixin ellipsisMore($line) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
  overflow: hidden;
}

// 边框圆角
@mixin radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

// 绝对定位
@mixin abs-pos ($top: auto, $right: auto, $bottom: auto, $left: auto, $zIndex:auto) {
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
  z-index: $zIndex;
  position: absolute;
}

// 固定定位
@mixin fix-pos ($top: auto, $right: auto, $bottom: auto, $left: auto, $zIndex:auto) {
  position: fixed;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
  z-index: $zIndex;
}